<!--我的地址-->
<template>
  <div class="myAddress">
  <mt-header fixed title="我的收货地址">
      <div slot="left" @click="goBack">
        <mt-button icon="back"></mt-button>
    </div>
  </mt-header>
 	<!--收货地址展示-->
	  <div class="myAddr">
	    <div class="myAddr-main">
	      <div class="mm-person">
	        <span class="name">林泽文</span>
	        <span class="mobile">12345678911</span>
	      </div>
	      <div class="mm-addr">
	        <span class="province">广东省</span>
	        <span class="city">深圳市</span>
	        <span class="region">南山区</span>
	        <span class="detail">深圳湾生态园</span>
	      </div>
	    </div>
	    <div class="myAddr-action">
	      <div class="ma-default" @click="putDefault()">
	        <!--判断是否选中-->
	        <div class="icon-circle"></div> 设为默认地址
	      </div>
	      <div class="ma-del" @click="delAddr()">
	        <div class="icon-bin"></div> 删除
	      </div>
	      <div class="ma-edit" @click="editAddr()">
	        <div class="icon-edit"></div> 编辑
	      </div>
	    </div>
	  </div>
	  <div class="addrFooter" @click="addAddr()">添加收货地址</div>
  </div>
</template>

<script>
import { Header, Toast, MessageBox } from "mint-ui";
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    putDefault(id) {},
    delAddr(id) {},
    editAddr(id) {},
    addAddr() {},
    initPageData() {},
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.myAddress {
  padding-bottom: 120px;
  padding-top: 90px;
}
.myAddr {
  width: 100%;
  margin-bottom: 20px;
  background-color: #fff;
  color: #575757;
  font-size: 28px;
  overflow: hidden;
}
.myAddr-main {
  padding: 38px 0;
  padding-bottom: 30px;
  border-bottom: 2px dashed #999;
}
.mm-person {
  height: 36px;
  padding: 0 38px;
  margin-bottom: 24px;
  .name {
    float: left;
  }
  .mobile {
    float: right;
  }
}
.mm-addr {
  padding: 0 38px;
  word-break: break-all;
  span {
    margin-right: 10px;
  }
}
.myAddr-action {
  padding: 16px 38px;
  height: 56px;
  line-height: 56px;
}
.ma-del,
.ma-edit {
  float: right;
  height: 56px;
  margin-left: 30px;
  line-height: 58px;
}
.ma-default {
  float: left;
  width: 50%;
  position: relative;
  .icon-circle {
    float: left;
    margin: 6px 20px 0 0;
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #c8c7c7;
  }
}
.icon-edit {
  float: left;
  display: inline-block;
  width: 38px;
  height: 38px;
  margin: 10px 12px 0 0;
  background: url("../../assets/images/mine/icon-edit.png") left top no-repeat;
  background-size: 38px 37px;
}
.icon-bin {
  float: left;
  display: inline-block;
  width: 38px;
  height: 38px;
  margin: 10px 12px 0 0;
  background: url("../../assets/images/mine/icon-bin2.png") left top no-repeat;
  background-size: 38px 37px;
}
.addr-default {
  color: #ff5252;
}
.addrFooter {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background: -webkit-linear-gradient(left bottom, #2e8b57, #4b2);
  background: linear-gradient(left bottom, #2e8b57, #4b2);
  color: #fff;
  font-size: 28px;
}
</style>